<template>
	<view>
		<u-sticky bgColor="#6492FF" offsetTop=0 customNavHeight=0>
			<navbox title="订单记录"></navbox>
			<u-notice-bar icon='' url="/pages/my/independent" :text="text1" speed='40' color="#FE0000" bgColor="#F3D6AC"></u-notice-bar>
			<view class="tab">
				<u-tabs :list="list1" lineHeight='10rpx' lineWidth="70rpx" lineColor="linear-gradient(235deg, #0059C9 0%, #4497FF 100%)"
					:activeStyle="{
				            color: '#3E3D3D'
				        }" :inactiveStyle="{
				            color: '#3E3D3D'
				        }" itemStyle="background-color: #f6f6f6;width:25%;padding:17rpx 0 27rpx;" @click="clicktab" :current='current'>
				</u-tabs>
			</view>
		</u-sticky>
		<view class="con" v-if="list.length>0">
			<view class="con__item" v-for="(item,index) in list" :key="index">
				<view class="con__item__text">
					名称：{{item.product}}
				</view>
				<view class="con__item__text">
					金额：{{item.channelPrice}}元
				</view>
				<view class="con__item__text">
					类型：<text>{{item.taskName}}</text>
					
					
					<!-- <text v-if='item.type==1'>结算本人</text><text v-if='item.type==2'>结算上级</text><text v-if='item.type==3'>统一结算</text> -->
				</view>
				
				<view class="con__item__text">
					报备信息：{{item.applyName}}({{item.applyThirdId}}) {{item.applyTel}}
				</view>
				<view class="con__item__text">
					用户信息：{{item.name}} {{item.tel}}
				</view>
				<view class="con__item__text">
					时间：{{item.buildTime}}
				</view>
				<view class="con__item__text">
					订单编号：{{item.orderNo}}  <text class="copy" style="margin-left: 10rpx;" @click="copy(item.orderNo)">复制</text>
				</view>
				<view class="con__item__text">
					单数：{{item.orderCount}}
				</view>
				<view class="con__item__text" v-if="item.status==0">
					审核状态：审核中
				</view>
				<view class="con__item__text" v-if="item.status==1">
					审核状态：已完成
				</view>
				<view class="con__item__text" v-if="item.status==2">
					审核状态：失败
				</view>
				<view class="con__item__text" v-if="item.status==2">
					失败原因：{{item.extend1}}
				</view>
				<view class="con__item__text u-flex" v-if="item.iszk">
					<view style="flex-shrink: 0;">
						截图：
					</view>
					<view class="u-flex u-flex-center u-flex-between u-flex-wrap" style="padding: 0 16rpx;">
						<image  v-for="(item1,index1) in item.img" :src="item1" class="con__item__dpic" mode="aspectFill"></image>
					</view>
				</view>
				<view class="con__item__footer" @click="clickbt(item.iszk,index)" v-if="!item.iszk">
					展开 <image src="/static/img/my/sx.png" class="con__item__footer__icon" mode=""></image>
				</view>
				<view class="con__item__footer" @click="clickbt(item.iszk,index)" v-else>
					收起 <image src="/static/img/my/ss.png" class="con__item__footer__icon" mode=""></image>
				</view>
				<image v-if="item.status==0" src="/static/img/my/shz.png" class="con__item__status" mode=""></image>
				<image v-if="item.status==2" src="/static/img/my/shbhg.png" class="con__item__status" mode=""></image>
				<image v-if="item.status==1" src="/static/img/my/ywc.png" class="con__item__status" mode=""></image>
				
			</view>
		</view>
		<view class="" v-else style="padding-top: 200rpx;">
			<u-empty mode="data"  icon='/static/img/index/empty.png' text="暂时没有数据"></u-empty>
		</view>
	</view>
</template>

<script>
	import {orderlist} from '@/api/home.js'
	export default {
		data() {
			return {
				text1: '',
				list1: [{
					name: '全部订单',
					status:''
				}, {
					name: '审核中',
					status:0
				}, {
					name: '已完成',
					status:1
				}, {
					name: '不合格',
					status:2
				}, ],
				iszk:false,
				productId:'',
				list:[],
				current:0
			};
		},
		methods:{
			getorderlist(){
				orderlist({productId:this.productId,status:this.list1[this.current].status}).then(res=>{
					uni.stopPullDownRefresh()
					if(res.data.code==200){
						this.text1=res.data.data.alonePlats+'等无需提交凭证，请前往独立后台查询订单详情。去查看'
						this.list=res.data.data.list
						this.list.map(t=>{
							t.iszk=false
							t.img=t.images.split(',')
						})
						
					}
				})
			},
			clicktab(e){
				this.current=e.index
				this.getorderlist()
			},
			clickbt(iszk,index){
				this.list[index].iszk=!iszk
				this.$forceUpdate()
			}
		},
		onLoad(option) {
			this.productId=option.productId
			this.current=option.current
			this.getorderlist()
		},
		onPullDownRefresh() {
			this.getorderlist()
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.tab{
	padding-bottom: 25rpx;
	background-color: #f6f6f6;
}
.con{
	padding: 0 16rpx 50rpx;
	&__item{
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 6rpx 0 0;
		position: relative;
		overflow: hidden;
		margin-bottom: 25rpx;
		&__text{
			padding-left: 30rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #3E3D3D;
			line-height: 26rpx;
			margin-top: 20rpx;
		}
		&__dpic{
			width: 280rpx;
			height: 160rpx;
		}
		&__footer{
			margin-top: 25rpx;
			height: 50rpx;
			background: #6492FF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 25rpx;
			color: #FEFEFE;
			line-height: 25rpx;
			&__icon{
				width: 18rpx;
				height: 18rpx;
				margin-left: 6rpx;
			}
		}
		&__status{
			width: 104rpx;
			height: 104rpx;
			position: absolute;
			top: 26rpx;
			right: 27rpx;
		}
	}
}
</style>